<script setup>
import { ref, reactive, onMounted, watch, computed, unref } from 'vue'
import { queryObList } from '@/api/home'
import { useAccountStore } from '@/stores/account'
import { formatColumn } from '@/utils/tools.js'
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const { t } = useI18n()
const props = defineProps({
  insuredInfo: {
    type: Object,
    required: () => {}
  },
  policyInfo: {
    type: Object,
    required: () => {}
  }
})
const accountStore = useAccountStore()
const isEyeOpen = computed(() => {
  return accountStore.DESENSITIZATION
})
// 脱敏
watch(
  () => isEyeOpen.value,
  (newValue, oldValue) => {
    initData()
  }
)

function handlePageChange(page, pageSize) {
  pagination.current = page
  pagination.pageSize = pageSize
  getTableList()
}
const pagination = reactive({
  current: 1,
  pageSize: 10,
  size: 'large',
  showSizeChanger: true,
  hideOnSinglePage: true,
  total: 0,
  onChange: handlePageChange
})
const dynamicColumns = computed(() => {
  return [
    {
      title: t('home.ob.Underwriter'),
      dataIndex: 'underwriterName',
      key: 'underwriterName',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.ob.MemberID'),
      dataIndex: 'memberId',
      key: 'memberId',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.ob.PatientName'),
      dataIndex: 'membersName',
      key: 'membersName',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.ob.ClaimNo'),
      dataIndex: 'claimNo',
      key: 'claimNo',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.ob.ServiceDate'),
      dataIndex: 'serviceDate',
      key: 'serviceDate',
      customRender: ({ text, record, index }) => formatColumn(text)
    },
    {
      title: t('home.ob.OBRemaining'),
      dataIndex: 'restOBAmountCNY',
      key: 'restOBAmountCNY',
      customRender: ({ text, record, index }) => formatColumn(text)
    }
  ]
})
const loading = ref(false)
let dataSource = ref([])
const sumRestOBAmountCNY = ref(null)
async function getTableList() {
  loading.value = true
  const data = {
    current: pagination.current,
    size: pagination.pageSize,
    desensitization: unref(isEyeOpen) ? '02' : '01',
    memberId: props.insuredInfo.memberId
  }
  let res = null
  try {
    res = await queryObList(data)
  } catch (err) {
    console.log('err', err)
  } finally {
    loading.value = false
  }
  if (res?.isSuccess) {
    sumRestOBAmountCNY.value = res.data.sumRestOBAmountCNY
    dataSource.value = res.data.pageObList.records
    pagination.total = Number(res.data.pageObList.total)
  }
}
async function initData() {
  pagination.current = 1
  getTableList()
}
onMounted(async () => {
  initData()
})
function openObLink(record) {
  window.open(record.checkClaimsInputUrl)
}
function routerGoMoreOb() {
  console.log('routerGoMoreOb', props.policyInfo)
  router.push({
    path: '/ob/index',
    query: {
      ...route.query,
      memberId: props.insuredInfo.memberId,
      customerId: props.policyInfo.customer_id
    }
  })
}
</script>
<template>
  <div>
    <div class="ob-info">
      <div class="common-info-header">
        <span class="common-info-header-name"> {{ $t('home.ob.OBInfo') }} </span>
        <div class="line"></div>
        <!-- <div class="link" @click="routerGoMoreOb">
          <svg-icon size="14" name="home-more" />
          {{ $t('home.ob.moreOB') }}
        </div> -->
      </div>
      <div class="ob-info-main">
        <div class="ob-title">
          <span>{{ $t('home.ob.resetOB') }}：</span>
          <span class="ob-title-red">CNY {{ sumRestOBAmountCNY }}</span>
        </div>
        <a-table
          :pagination="pagination"
          class="ant-table-striped"
          :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
          size="middle"
          :dataSource="dataSource"
          :columns="dynamicColumns"
        >
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.key === 'claimNo'">
              <span class="text-decortion" @click="openObLink(record)">{{
                formatColumn(text)
              }}</span>
            </template>
            <template v-if="column.key === 'restOBAmountCNY'">
              <span class="rest-ob-amountcny">{{ formatColumn(text) }}</span>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.ob-info {
  &-main {
    padding: 20px 24px;
    margin-top: 20px;
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0, 58, 84, 0.08);
    border-radius: 10px;
    .ob-title {
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      .ob-title-red {
        color: #cf595d;
        margin-left: 6px;
      }
    }
    .operation {
      color: $color-action;
    }
    .text-decortion {
      font-weight: 400;
      font-size: 14px;
      color: #4d789c;
      text-decoration: underline;
      cursor: pointer;
    }
    .text-decortion:hover {
      color: #97b7c5;
    }
    .text-decortion-red {
      color: #cf595d;
    }
    .rest-ob-amountcny {
      color: #cf595d;
    }
    .splice-line {
      display: inline-block;
      margin: 0px 12px;
      height: 14px;
      width: 1px;
      background-color: rgb(223, 223, 223);
    }
  }
  .ant-table-striped .table-striped td {
    background-color: #fafafa;
  }
  .ant-table-striped td,
  .ant-table-striped th {
    border-top: transparent !important;
    border-bottom: transparent !important;
  }
}
</style>
